<template>
	<view class="my-merchant">
		<u-sticky>
			<view class="search-or-add u-flex">
				<u-search placeholder="请输入商户名称" v-model="params.keyword" :showAction="false" @change="searchMerchant()">
				</u-search>
				<view class="add-container" @click="nav()">
					<u-icon name="plus" color="rgb(96,114,255)" size="26rpx"></u-icon>
					<view class="add-merchant">添加分账商户</view>
				</view>
			</view>
		</u-sticky>
		<view class="body-container" v-if="merchantList.length > 0" v-for="(item,index) in merchantList" :key="index">
			<view class="top">
				<u--image :showLoading="true" :src="`${baseStaticFileUrl}/image/pages-merchant/merchant.png`"
					width="76rpx" height="76rpx"></u--image>
				<view class="name"><text>{{item.qualificationName}}({{item.merchantShortName}})</text></view>

				<view v-if="item.status==merchantStatusEnum.AUDITING_MYBANK" class="statusTypePrimary">审核中</view>
				<view v-else-if="item.status==merchantStatusEnum.SUCCESS" class="statusTypeSuccess">开通</view>
				<view v-else-if="item.status==merchantStatusEnum.FAIL || merchant.status == merchantStatusEnum.GO_BACK"
					class="statusTypeError">拒绝</view>
				<view v-else-if="item.status==merchantStatusEnum.OFF" class="statusTypeInfo">禁用</view>
				<view v-if="item.status==merchantStatusEnum.AUDITING_YIHAO" class="statusTypePrimary">平台审核中</view>
				<view v-if="item.status==merchantStatusEnum.AUDITING_MYBANK_MAN" class="statusTypePrimary">渠道人工审核中
				</view>

			</view>
			<view class="middle flex" v-if="item.wechatMerchId">
				<view><text class="bold">微信认证</text>商户号：<text>{{item.wechatMerchId}}</text></view>
				<view class="copy-text" @click="copy(item.wechatMerchId)">复制</view>
			</view>
			<view class="middle flex" v-if="item.aliMerchId">
				<view><text class="bold">支付宝认证</text>商户号：<text>{{item.aliMerchId}}</text></view>
				<view class="copy-text" @click="copy(item.aliMerchId)">复制</view>
			</view>
			<view class="middle">
				<view>汇联商户号：<text @click="copy(item.merchantId)">{{item.merchantId}}</text></view>
			</view>
			<view class="lower middle" v-if="item.status==merchantStatusEnum.FAIL">
				<view class="u-lint-ellipsis-2"><text style="color: rgb(254, 64, 76);">拒接原因</text>：{{item.failReason}}
				</view>
				<view class="details">
					<view class="icon-style">
						<u-icon name="arrow-right" color="rgb(0, 0, 0, 0.7)" size="24rpx"></u-icon>
					</view>
				</view>
			</view>
			<view class="lower middle" v-else-if="item.status==merchantStatusEnum.OFF">
				<view class="u-lint-ellipsis-2"><text style="color: rgba(0, 0, 0, 0.5);">禁用原因</text>：{{item.failReason}}
				</view>
				<view class="details">
					<view class="icon-style">
						<u-icon name="arrow-right" color="rgb(0, 0, 0, 0.7)" size="24rpx"></u-icon>
					</view>
				</view>
			</view>
			<view class="lower middle" v-else>
				<view>默认支付渠道：{{item.name}}</view>
			</view>
			<view class="middle">
				<view>分账场地：{{item.areaCount}}个</view>
			</view>

		</view>
		<view v-if="merchantList.length == 0">
			<u-empty marginTop="200" text="暂无商户" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
		</view>
		<u-loadmore v-if="merchantList.length !== 0" :status="loadStatus" height="70rpx" line=true></u-loadmore>
		<u-modal :show="show" :showConfirmButton="false" @cancel="show=false" :closeOnClickOverlay="true"
			@close="show=false">
			<view class="slot-content">
				<view class="modal-title">
					<u-icon name="error-circle-fill" color="#FFB800"></u-icon><text
						style="padding-left: 10rpx;">温馨提示</text>
				</view>
				<rich-text class="text-style" :nodes="content"></rich-text>
				<view class="tool-btn">
					<u-button @click="show=false" shape="circle"
						:customStyle="{ width:'250rpx', color: '#1643776',height: '70rpx',marginTop: '20rpx',fontSize:'26rpx'}">
						取消
					</u-button>
					<u-button @click="navModal" shape="circle"
						:customStyle="{ width:'250rpx', color: '#fff',height: '70rpx',backgroundColor: '#6072FF',marginTop: '20rpx',fontSize:'26rpx'}">
						前往注册或确认</u-button>
				</view>
			</view>
		</u-modal>
		<u-modal :show="showQian" :showConfirmButton="false" @cancel="showQian=false" :closeOnClickOverlay="true"
			@close="showQian=false">
			<view class="slot-content">
				<view class="modal-title">
					<u-icon name="error-circle-fill" color="#FFB800"></u-icon><text
						style="padding-left: 10rpx;">温馨提示</text>
				</view>
				<rich-text class="text-style" :nodes="contentQian"></rich-text>
				<view class="tool-btn">
					<u-button @click="showQian=false" shape="circle"
						:customStyle="{ width:'250rpx', color: '#1643776',height: '70rpx',marginTop: '20rpx',fontSize:'26rpx'}">
						取消
					</u-button>
					<u-button @click="navModal2" shape="circle"
						:customStyle="{ width:'250rpx', color: '#fff',height: '70rpx',backgroundColor: '#6072FF',marginTop: '20rpx',fontSize:'26rpx'}">
						前往签约</u-button>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseStaticFileUrl: this.$configPath.staticFileUrl,
				merchantStatusEnum: this.$merchantStatusEnum,
				loadStatus: 'nomore', //列表底部加载更多状态
				params: {
					pageNum: 1,
					pageSize: 10,
					keyword: '',
				},
				merchantList: [],
				count: 0,
				show: false,
				showQian: false,
				merchant: [],
				qualificationTypeEnum: this.$qualificationTypeEnum,
				paymentChannelsEnum: this.$paymentChannelsEnum,
				content: '系统尚未查到你有主商户，请前往注册或 确认。如有疑问请联系平台客户处理。',
				contentQian: '你的主商户不支持分账，请签约【合利宝 】支付渠道并设置为场地收款默认商户。'
			}
		},
		onLoad() {
			this.findMerchantSubAccountByUserId()
			this.findQualificationByType()
		},
		methods: {
			// 点击复制
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: () => {
						uni.showToast({
							title: "复制成功"
						})
					}
				});
			},
			//查询是否有主商户
			findQualificationByType() {
				this.$api('qualification.findQualificationByType', {
					type: this.qualificationTypeEnum.MAIN_QUALIFICATIONS
				}).then(res => {
					if (res.status == 0) {
						this.merchant = res.data
					} else {
						getApp().err("查询失败" + res.msg)
					}
				})
			},
			//查询分账商户
			findMerchantSubAccountByUserId() {
				this.$api('merchant.findMerchantSubAccountByUserId', this.params).then(res => {
					if (res.status == 0) {
						this.params.pageNum = res.data.pageNum;
						this.params.totalPage = res.data.pages;
						this.loadStatus = res.data.pageNum === res.data.pages ? 'nomore' : 'loadmore';
						if (this.params.totalPage == 0) {
							this.loadStatus = 'nomore';
						}
						this.merchantList = res.data.list; //合并数组
					}
				});
			},
			//搜索
			searchMerchant() {
				this.merchantList = []
				this.findMerchantSubAccountByUserId()
			},
			//路径跳转
			nav() {
				//判断主商户
				if (this.merchant.length <= 0) {
					this.show = true
					return
				}
				//判断主商户 签约的支付渠道是否含有合利宝
				if (this.merchant.length > 0) {
					let flog = this.merchant.some(item => item.payCompanyCode == this.paymentChannelsEnum.HELIPAY)
					if (!flog) {
						this.showQian = true
						return
					}
				}
				uni.navigateTo({
					url: '/pages-qualification/sub-account-qualification/add/settlement-type'
				})
			},
			//跳转签约合利宝页面
			navModal2() {
				this.merchant[0].merchantId = this.merchant[0].merchantNo
				uni.navigateTo({
					url: '/pages-merchant/detail/detail?merchant=' + encodeURIComponent(JSON.stringify(this
						.merchant[0]))
				})
			},
			//前往注册或确认
			navModal() {
				let userInfo = this.$store.getters.GET_VALUE("GET_USER_INFO");
				if (!userInfo.username && !userInfo.mobile) {
					uni.navigateTo({
						url: '/pages/complete-user-info/complete-user-info?type=1'
					})
				} else {
					uni.navigateTo({
						url: '/pages-qualification/add/settlement-type'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-modal__content {
		background: linear-gradient(180.00deg, rgba(227, 245, 255, 1.00) 0%, rgba(255, 255, 255, 1.00) 33%);
	}

	.copy-text {
		color: #6072FF;
	}

	.bold {
		font-weight: bold;
	}

	.my-merchant {
		padding-bottom: 60rpx;

		.search-or-add {
			background-color: white;
			padding: 20rpx 24rpx;
			align-items: center;

			.add-container {
				display: flex;
				align-items: center;
				margin-left: 40rpx;

				.add-merchant {
					color: rgb(96,114,255);
					font-size: $f-sm;
					letter-spacing: 0.25rpx;
				}
			}
		}

		.modal-title {
			display: flex;
			justify-content: center;
			margin-bottom: 20rpx;
		}

		.text-style {
			color: rgba(0, 0, 0, 0.8);
			font-size: $f-sm;
			line-height: 50rpx;
			letter-spacing: 1rpx;
		}

		.tool-btn {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			width: 100%;
			border-top: 1px solid #fafafa;
			height: 100rpx;
			background: $uni-bg-color;
		}

		.body-container {
			background-color: white;
			margin: 20rpx 24rpx;
			padding: 20rpx 28rpx 30rpx 28rpx;
			border-radius: 20rpx;
			box-sizing: border-box;

			.top {
				display: flex;
				align-items: center;

				.name {
					flex: 1;
					color: rgba(0, 0, 0, 0.9);
					font-size: 30rpx;
					letter-spacing: 0.26rpx;
					margin-left: 16rpx;
				}

				.right {
					font-size: $f-sm;
					letter-spacing: 0.26rpx;
				}

				.statusTypePrimary {
					color: $u-primary;
				}

				.statusTypeSuccess {
					color: $u-success;
				}

				.statusTypeError {
					color: $u-error;
				}

				.statusTypeWarning {
					color: $u-warning;
				}

				.statusTypeInfo {
					color: rgba(0, 0, 0, 0.5);
				}
			}

			.flex {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.middle {
				margin-top: 24rpx;
				color: rgba(0, 0, 0, 0.8);
				font-size: $f-sm;
				letter-spacing: 0.26rpx;
			}

			.lower {
				display: flex;
				justify-content: space-between;

				.details {
					display: flex;

					.icon-style {
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
</style>
